<template>
	<el-card shadow="hover">
		<div v-if="!getUserInfos.is_supplier" class="inner-content system-home-content">
			<div class="system-home-panel-summary">
				<span class="system-home-panel-summary-title">
					实时概括
					<!-- <el-button @click="onView" type="info" style="margin-left: 19px;">统计明细</el-button> -->
				</span>
				<!-- <span class="system-home-panel-summary-date">更新时间：{{ homeData.updateTime }}</span> -->
			</div>
			<div class="system-home-panel-content">
				<div class="system-home-panel">
					<div class="system-home-panel_title">
						<span class="iconfont xczx-xiaoshoubaobiao" style="font-size: 20px" />
						<span style="margin: 0 16px">销售额</span>
					</div>
					<el-row :gutter="20" type="flex" justify="space-between">
						<el-col :span="6">
							<div class="system-home-panel_item sales">
								<div class="system-home-panel_item-number">
									{{ homeData.today.sale }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本日总销售额（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item sales">
								<div class="system-home-panel_item-number">
									{{ homeData.month.sale }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本月总销售额（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item sales">
								<div class="system-home-panel_item-number">
									{{ homeData.year.sale }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本年总销售额（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item sales">
								<div class="system-home-panel_item-number">
									{{ homeData.total.sale }}
								</div>
								<div class="system-home-panel_item-text">
									<span>总销售额（元）</span>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="system-home-panel">
					<div class="system-home-panel_title">
						<span class="iconfont xczx-xiaoshoubaobiao" style="font-size: 20px" />
						<span style="margin: 0 16px">成本</span>
					</div>
					<el-row :gutter="20" type="flex" justify="space-between">
						<el-col :span="6">
							<div class="system-home-panel_item service">
								<div class="system-home-panel_item-number">
									{{ homeData.today.cost }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本日成本（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item service">
								<div class="system-home-panel_item-number">
									{{ homeData.month.cost }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本月成本（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item service">
								<div class="system-home-panel_item-number">
									{{ homeData.year.cost }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本年度成本（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item service">
								<div class="system-home-panel_item-number">
									{{ homeData.total.cost }}
								</div>
								<div class="system-home-panel_item-text">
									<span>总计成本（元）</span>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="system-home-panel">
					<div class="system-home-panel_title">
						<span class="iconfont xczx-xiaoshoubaobiao" style="font-size: 20px" />
						<span style="margin: 0 16px">利润</span>
					</div>
					<el-row :gutter="20" type="flex" justify="space-between">
						<el-col :span="6">
							<div class="system-home-panel_item resident_agent">
								<div class="system-home-panel_item-number">
									{{ homeData.today.profit }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本日利润（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item resident_agent">
								<div class="system-home-panel_item-number">
									{{ homeData.month.profit }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本月利润（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item resident_agent">
								<div class="system-home-panel_item-number">
									{{ homeData.year.profit }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本年度利润（元）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item resident_agent">
								<div class="system-home-panel_item-number">
									{{ homeData.total.profit }}
								</div>
								<div class="system-home-panel_item-text">
									<span>总计利润（元）</span>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="system-home-panel">
					<div class="system-home-panel_title">
						<span class="iconfont xczx-xiaoshoubaobiao" style="font-size: 20px" />
						<span style="margin: 0 16px">订单数</span>
					</div>
					<el-row :gutter="20" type="flex" justify="space-between">
						<el-col :span="6">
							<div class="system-home-panel_item number_of_orders">
								<div class="system-home-panel_item-number">
									{{ homeData.today.orders_num }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本日订单数（单）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item number_of_orders">
								<div class="system-home-panel_item-number">
									{{ homeData.month.orders_num }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本月订单数（单）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item number_of_orders">
								<div class="system-home-panel_item-number">
									{{ homeData.year.orders_num }}
								</div>
								<div class="system-home-panel_item-text">
									<span>本年度订单数（单）</span>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="system-home-panel_item number_of_orders">
								<div class="system-home-panel_item-number">
									{{ homeData.total.orders_num }}
								</div>
								<div class="system-home-panel_item-text">
									<span>总订单数（单）</span>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
		<div style="height: 88vh" v-else>
			<el-row :gutter="10" class="mb20">
				<el-col :span="1.5">
					<el-button @click="onApplyWithdraw" type="primary" size="large" plain>申请提现</el-button>
					<el-button @click="onViewPaymentObvious" type="info" size="large" plain>查看货款明细</el-button>
					<el-button @click="onViewWithdrawObvious" type="info" size="large" plain>提现记录</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="8">
					<el-card shadow="always">
						<div style="font-size: 30px">{{ Number(supplierMoneyPayment.all_money) }}元</div>
						<div>已审核总货款</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="always">
						<div style="font-size: 30px">{{ Number(supplierMoneyPayment.apply_money) }}元</div>
						<div>已提现银行卡货款</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="always">
						<div style="font-size: 30px">{{ Number(supplierMoneyPayment.money) }}元</div>
						<div>剩余可提现货款</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<viewPaymentObviousDialog ref="viewPaymentObviousDialogRef" />
		<viewWithdrawObviousDialog ref="viewWithdrawObviousDialogRef" />
		<applyWithdrawDialog ref="applyWithdrawDialogRef" />
	</el-card>
</template>

<script lang="ts">
import { computed, onMounted, reactive, ref, toRefs } from 'vue';
import { indexPlatform, supplier1Api } from '/@/api/admin';
import { store } from '/@/store';

import viewPaymentObviousDialog from './dialog/viewPaymentObviousDialog.vue';
import viewWithdrawObviousDialog from './dialog/viewWithdrawObviousDialog.vue';
import applyWithdrawDialog from './dialog/applyWithdrawDialog.vue';

const Supplier1Api = supplier1Api();
export default {
	name: 'homePage',
	components: {
		viewPaymentObviousDialog,
		viewWithdrawObviousDialog,
		applyWithdrawDialog,
	},
	setup() {
		const state = reactive({
			homeData: {
				month: {
					sale: 0,
					orders_num: 0,
					cost: 0,
					profit: 0,
					integral: 0,
					settlement_price: 0,
				},
				year: {
					sale: 0,
					orders_num: 0,
					cost: 0,
					profit: 0,
					integral: 0,
					settlement_price: 0,
				},
				total: {
					sale: 0,
					orders_num: 0,
					cost: 0,
					profit: 0,
					integral: 0,
					settlement_price: 0,
				},
				today: {
					sale: 0,
					orders_num: 0,
					cost: 0,
					profit: 0,
					integral: 0,
					settlement_price: 0,
				},
			},
			supplierMoneyPayment: {
				all_money: '',
				apply_money: '',
				money: '',
			},
		});
		const viewPaymentObviousDialogRef = ref();
		const viewWithdrawObviousDialogRef = ref();
		const applyWithdrawDialogRef = ref();

		onMounted(() => {
			if (!getUserInfos.value.is_supplier) {
				getList();
			} else {
				_mySupplierMoneyPayment();
			}
		});

		// 获取用户信息
		const getUserInfos: any = computed(() => {
			return store.state.userInfos.userInfos;
		});

		/********** 点击事件(on开头) **********/
		// 申请提现
		const onApplyWithdraw = () => {
			applyWithdrawDialogRef.value.openDialog(state.supplierMoneyPayment);
		};
		// 查看货款明细
		const onViewPaymentObvious = () => {
			viewPaymentObviousDialogRef.value.openDialog();
		};
		// 查看货款明细
		const onViewWithdrawObvious = () => {
			viewWithdrawObviousDialogRef.value.openDialog();
		};

		/********** 方法事件 **********/
		const getList = () => {
			_indexPlatform();
		};

		/********** 网络请求 **********/
		const _indexPlatform = () => {
			indexPlatform({}).then((res: any) => {
				state.homeData = res.data.info;
			});
		};
		// 我的货款信息
		const _mySupplierMoneyPayment = () => {
			Supplier1Api.mySupplierMoneyPayment().then((res: any) => {
				state.supplierMoneyPayment = res.data.info;
			});
		};

		return {
			viewPaymentObviousDialogRef,
			viewWithdrawObviousDialogRef,
			applyWithdrawDialogRef,
			getUserInfos,
			onApplyWithdraw,
			onViewPaymentObvious,
			onViewWithdrawObvious,
			getList,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped>
.system-home-content {
	padding: 20px;
	.system-home-panel-summary {
		padding: 16px 0 26px;
		.system-home-panel-summary-title {
			display: flex;
			align-items: center;
			margin-right: 20px;
			font-size: 24px;
			font-weight: bold;
			color: #000000;
		}
		.system-home-panel-summary-date {
			font-size: 16px;
			color: #999999;
		}
	}
	.system-home-panel-content {
		width: 100%;
		padding: 0 20px 36px;
		background-color: #ffffff;
		.system-home-panel {
			display: flex;
			flex-direction: column;
			.system-home-panel_title {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 36px 0 27px;
				font-size: 18px;
				font-weight: bold;
			}
			.system-home-panel_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 180px;
				font-size: 48px;
				font-weight: bold;
				.system-home-panel_item-text {
					font-size: 16px;
					font-weight: normal;
					line-height: 30px;
					.ht-icon-wenhao {
						font-size: 16px;
					}
				}
			}
			.sales {
				background-color: #ffefdd;
				.system-home-panel_item-number {
					color: #ff9218;
					font-family: 'DINCondensedC';
					font-size: 35px;
				}
				.system-home-panel_item-text {
					color: #ffa43f;
				}
			}
			.service {
				background-color: #ffe1e1;
				.system-home-panel_item-number {
					color: #ff3939;
					font-family: 'DINCondensedC';
					font-size: 35px;
				}
				.system-home-panel_item-text {
					color: #ff4040;
				}
			}
			.number_of_orders {
				background-color: #cbfcff;
				.system-home-panel_item-number {
					color: #009fa9;
					font-family: 'DINCondensedC';
					font-size: 35px;
				}
				.system-home-panel_item-text {
					color: #02ceda;
				}
			}
			.resident_agent {
				background-color: #ffe8ff;
				.system-home-panel_item-number {
					color: #ff0072;
					font-family: 'DINCondensedC';
					font-size: 35px;
				}
				.system-home-panel_item-text {
					color: #ff499a;
				}
			}
			.consumer_user {
				background-color: #e8ebff;
				.system-home-panel_item-number {
					color: #4e5bc2;
					font-family: 'DINCondensedC';
					font-size: 35px;
				}
				.system-home-panel_item-text {
					color: #7b85d9;
				}
			}

			.settlement_price {
				background-color: RGB(181, 169, 234);
				.system-home-panel_item-number {
					color: RGB(132, 123, 170);
					font-family: 'DINCondensedC';
					font-size: 35px;
				}
				.system-home-panel_item-text {
					color: RGB(227, 227, 227);
				}
			}
		}
	}
}
</style>
